<template>
  <div>
    <div class="user-box">
      <div class="mgb10 mgt10" style="display: inline-block">代理：</div>

      <el-checkbox v-model="checkAll" @change="chooseAll">{{ $t('common.selectAll') }}</el-checkbox>
      <div style="margin-top: 5px"></div>
      <el-checkbox-group v-model="queryParams.agentIds" @change="changeOption">
        <el-checkbox
          v-for="item in allAgentList"
          :label="item.id"
          :key="item.id"
          class="agent-check-box"
        >
          {{item.nickname}}
        </el-checkbox>
      </el-checkbox-group>

    </div>
    <div class="line1 mgt10">
      <div class="left">
        <diy-date :date-type="2" v-model="queryParams.times" @change="changeOption"></diy-date>
      </div>
      <div class="right">
        <export-button :func="func" :query-params="queryParams"  :getTotal="1"></export-button>
        <el-button type="warning" @click="createPayment" :loading="createLoading">生成结算单</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        border
        :data="tableData"
        v-loading="loading"
        :key="apiTimes"
      >
        <el-table-column
          prop="containerNo"
          label="货柜/航班号"
          align="center"
          min-width="100"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="agentNum"
          label="代理数量"
          align="center"
          min-width="100"
        ></el-table-column>

        <el-table-column
          v-for="item in costList"
          :key="item.id"
          :prop="'costId' + item.id"
          :label="item.costName"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            <template v-if="row['costId' + item.id] !== undefined">
              {{row['costId' + item.id]}}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="sumCostValue"
          label="总费用（元）"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="制单时间"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="installDate"
          label="装柜时间"
          align="center"
          min-width="100"
        ></el-table-column>

      </el-table>
    </div>
    <div class="font-red mgt10 f14">
      列表筛选时间为装柜日期
    </div>


  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import {
  createAgentFinanceContainer,
  createUserFinanceShipment,
  getAgentContainerCost,
  getUserShipmentFee
} from "@/api/finance";
import ExportButton from "@/views/order/components/ExportButton.vue";
import AllAgentMixin from "@/views/FLData/mixin/AllAgentMixin";
import router from "@/router";

export default {
  name: "AgentSettlementView",
  mixins: [AllAgentMixin],
  components: {ExportButton, DiyDate},
  watch:{
    allAgentList(){
      this.chooseAll()
      this.getData()
    },
  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        times: [],
        agentIds: [],
      },
      loading: false,
      tableData: [],
      total: 0,
      func: getAgentContainerCost,
      createLoading: false,
      checkAll: true,
      apiTimes: 0,
      costList: [],
    }
  },
  methods: {
    getData(){
      this.loading = true
      getAgentContainerCost(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.apiTimes++
          this.costList = res.info.costList
        })
    },
    changeOption(){
      this.checkAll = this.queryParams.agentIds.length === this.allAgentList.length;
      this.queryParams.page = 1;
      this.getData()
    },

    createPayment(){
      this.createLoading = true
      createAgentFinanceContainer(this.queryParams)
        .then(res=>{
          this.createLoading = false;
          const data = res.data
          const paymentIds = data.paymentIds || []
          if(paymentIds.length === 0){
            this.$eMsg('当前没有结算数据或数据已经结算了');
            return;
          }
          paymentIds.forEach(paymentId=>{

            const { href } = router.resolve({
              name: 'financeContainerInfo',
              query: {
                id: paymentId
              }
            })
            window.open(href,'_blank')

          })
        })
    },
    chooseAll(){
      this.queryParams.agentIds = [];
      if(this.checkAll){
        this.queryParams.agentIds = this.allAgentList.map(item=>item.id);
      }
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.line1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.agent-check-box{
  overflow: hidden;
  //text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}
</style>
